
<template>
    <div class="echarts-box">
        <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted, onBeforeMount,onUnmounted, reactive, watch } from "vue";
import { getList } from "../API"
export default {
    name: "App",
    props: ["width", "height"],
    setup() {
        let myEcharts = echarts;
        let commonity = []
        let salesEcharts = reactive([{value:200,name:'alg'}])
        onMounted(() => {
            initChart();
        });
        onBeforeMount(()=>{
            getCommonityList()
        })
        const getCommonityList = async () => {
            let { data } = await getList()
            commonity.push(...data)
            data.map(item => {
                salesEcharts.push({ value: 200, name: item.name })
            })
        }
        watch(salesEcharts,(newV,oldV)=>{
            console.log(salesEcharts,newV);

        },{immediate: true, deep: true})

        onUnmounted(() => {
            myEcharts.dispose;
        });

        function initChart() {
            console.log('执行');
            let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
            chart.setOption({
                title: {
                    left: 'left'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '商品销售情况',
                        type: 'pie',
                        radius: '50%',
                        data: salesEcharts,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });

            window.onresize = function () {
                chart.resize();
            };
        }

        return {
            initChart, salesEcharts
        };
    }
};
</script>

